<template>
  <div class="flex justify-between items-center px-4 py-2 text-sm bg-opacity-0" :class="statusBarClass">
    <span>{{ time }}</span>
    <div class="flex items-center space-x-1" :class="statusBarClass">
      <i class="fas fa-signal"></i>
      <span>{{ networkType }}</span>
      <i :class="batteryIcon"></i>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 状态栏配置
const time = ref('17:27')
const networkType = ref('4G')

// 根据当前路由动态设置状态栏样式
const statusBarClass = computed(() => {
  const currentPath = route.path

  // 首页 - 黑色主题
  if (currentPath === '/home' || currentPath === '/bingewatch') {
    return 'text-white'
  }

  // 默认 - 半透明白色
  return 'text-gray-800'
})

const batteryIcon = computed(() => {
  // 这里可以根据实际电量动态变化
  return 'fas fa-battery-three-quarters'
})
</script>

<style scoped>
/* 状态栏特定样式 */
</style>
